<template>
  <div style="display: inline-block" class="top-item">
    <el-card>
      <div class="title">{{ title }}</div>
      <div class="value">{{ value }}</div>
      <slot>default</slot>
      <el-divider style="margin: 12px 0" />
      <slot name="footer">footer</slot>
    </el-card>
  </div>
</template>
<script lang="ts">
export default {}
</script>
<script setup lang="ts">
defineProps(['title', 'value'])

</script>

<style scoped>
.top-item+.top-item {
  margin-left: 10px
}

hr {
  border-color: #999
}

.title {
  font-size: 12px;
  color: #999
}

.value {
  font-size: 24px;
  line-height: 36px;
}

.top-item {
  flex: 1
}
</style>